Highcharts এ Tooltip এবং Data Label হল দুটি অত্যন্ত গুরুত্বপূর্ণ উপাদান যা ডেটা ভিজুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং তথ্যপূর্ণ করে তোলে। আপনি Tooltip এবং Data Label এর মাধ্যমে আপনার চার্টে ব্যবহারকারীদের জন্য বিস্তারিত তথ্য এবং ব্যাখ্যা প্রদর্শন করতে পারেন। এখানে, আমরা এই দুটি উপাদানের জন্য কিছু Advanced Techniques নিয়ে আলোচনা করব, যা আপনার চার্টকে আরও কাস্টমাইজড এবং ইন্টারঅ্যাকটিভ করে তুলবে।
Tooltip কাস্টমাইজেশন
Tooltip হলো চার্টের একটি গুরুত্বপূর্ণ অংশ, যা ডেটার পয়েন্টের বিস্তারিত তথ্য প্রদর্শন করে যখন ব্যবহারকারী কোনো ডেটা পয়েন্টের উপর মাউস হোভার করেন। আপনি Tooltip এর মধ্যে অনেক কিছু কাস্টমাইজ করতে পারেন, যেমন ফরম্যাট, পজিশন, এবং কন্টেন্ট।
1. Tooltip Format কাস্টমাইজ করা
Highcharts এর tooltip.formatter ফাংশনের মাধ্যমে আপনি tooltip এর কন্টেন্ট কাস্টমাইজ করতে পারেন। আপনি এটি দিয়ে বিশেষ ফরম্যাটে ডেটা প্রদর্শন করতে পারবেন।
উদাহরণ: Custom Tooltip Format
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br>' +
'Month: ' + this.x + '<br>' +
'Sales: $' + this.y;
}
}
এখানে, this.x হল X-Axis এর মান (যেমন মাস), এবং this.y হল Y-Axis এর মান (যেমন বিক্রয়)। this.series.name সিরিজের নাম প্রদর্শন করবে।
2. Tooltip Styling
আপনি tooltip এর শৈলীও কাস্টমাইজ করতে পারেন, যেমন ব্যাকগ্রাউন্ড রঙ, বর্ডার, ফন্ট সাইজ, এবং প্যাডিং।
উদাহরণ: Tooltip Styling
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)', // ব্যাকগ্রাউন্ড রঙ
style: {
color: '#fff', // টেক্সটের রঙ
fontSize: '14px', // ফন্ট সাইজ
padding: '10px' // প্যাডিং
}
}
এখানে, tooltip এর ব্যাকগ্রাউন্ড কালার এবং টেক্সট স্টাইল কাস্টমাইজ করা হয়েছে।
3. Crosshairs ব্যবহার করা
Crosshairs ব্যবহার করে আপনি X এবং Y অক্ষের উপর একটি লাইনের মাধ্যমে ডেটা পয়েন্টের অবস্থান চিহ্নিত করতে পারেন। এটি ব্যবহারকারীদের জন্য আরও সঠিক ডেটা দেখানোর জন্য উপকারী।
উদাহরণ: Crosshairs ব্যবহার
tooltip: {
crosshairs: true // ক্রসহেয়ার সক্রিয়
}
এখানে, crosshairs সক্রিয় করা হয়েছে, যার ফলে ডেটা পয়েন্টের উপর মাউস হোভার করলে X এবং Y অক্ষের উপর একটি ক্রসহেয়ার দেখা যাবে।
4. Sticky Tooltip
আপনি যদি চান যে tooltip ব্যবহারকারীর মাউস মুভমেন্টের সাথে সাথে প্রদর্শিত হোক, তবে stickyTracking ফাংশন ব্যবহার করতে পারেন।
উদাহরণ: Sticky Tooltip
tooltip: {
stickyTracking: true // টুলটিপ মাউস ট্র্যাকিং অনুসরণ করবে
}
এখানে, stickyTracking সক্রিয় করা হয়েছে, যার ফলে tooltip ব্যবহারকারীর মাউসের অবস্থান অনুসরণ করবে।
Data Labels কাস্টমাইজেশন
Data Labels হল সেই লেবেলগুলি যা চার্টের ডেটা পয়েন্টগুলির উপর বা কাছাকাছি প্রদর্শিত হয়। আপনি Data Labels এর মাধ্যমে প্রতিটি ডেটা পয়েন্টের মান প্রদর্শন করতে পারেন এবং এগুলোর অবস্থান ও শৈলী কাস্টমাইজ করতে পারেন।
1. Data Label Formatter
Highcharts এ dataLabels.formatter ফাংশন ব্যবহার করে আপনি কাস্টম ফরম্যাটে ডেটা লেবেল প্রদর্শন করতে পারেন।
উদাহরণ: Custom Data Label Formatter
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
return 'Value: ' + this.y; // Y মান প্রদর্শন করবে
}
}
}
}
এখানে, this.y দ্বারা Y-Axis এর মান প্রদর্শন করা হয়েছে, যা প্রতিটি ডেটা পয়েন্টের মানকে কাস্টম টেক্সট সহ প্রদর্শন করবে।
2. Data Label Styling
আপনি dataLabels এর শৈলী কাস্টমাইজ করতে পারেন, যেমন ফন্ট, রঙ, এবং অবস্থান।
উদাহরণ: Data Label Styling
plotOptions: {
series: {
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold', // ফন্টের ওজন
color: '#FF0000', // ফন্টের রঙ
fontSize: '14px' // ফন্ট সাইজ
}
}
}
}
এখানে, dataLabels এর ফন্টের শৈলী কাস্টমাইজ করা হয়েছে।
3. Data Label Positioning
Data Labels এর অবস্থান কাস্টমাইজ করতে align, verticalAlign, এবং x, y প্রপার্টি ব্যবহার করা যায়।
উদাহরণ: Data Label Positioning
plotOptions: {
series: {
dataLabels: {
enabled: true,
verticalAlign: 'top', // লেবেলটি ডেটা পয়েন্টের উপরে থাকবে
align: 'center', // লেবেলটি সেন্টার আলাইন হবে
y: -10 // কিছুটা উপরে সেট করা হয়েছে
}
}
}
এখানে, verticalAlign এবং align ব্যবহার করে লেবেলের অবস্থান কাস্টমাইজ করা হয়েছে, এবং y দ্বারা লেবেলটি কিছুটা উপরে স্থানান্তরিত করা হয়েছে।
4. Data Label Background
Data Labels এর জন্য আপনি backgroundColor, borderWidth, এবং borderColor ব্যবহার করে একটি পটভূমি এবং বর্ডার যোগ করতে পারেন।
উদাহরণ: Data Label Background
plotOptions: {
series: {
dataLabels: {
enabled: true,
backgroundColor: 'rgba(255, 255, 255, 0.7)', // লেবেলের ব্যাকগ্রাউন্ড
borderWidth: 1, // বর্ডারের প্রস্থ
borderColor: '#000' // বর্ডারের রঙ
}
}
}
এখানে, backgroundColor এবং borderColor দিয়ে ডেটা লেবেলের জন্য একটি পটভূমি এবং বর্ডার সেট করা হয়েছে।
উপসংহার
Highcharts এ Tooltip এবং Data Labels কাস্টমাইজ করার মাধ্যমে আপনি আপনার চার্টকে আরও ইন্টারঅ্যাকটিভ এবং তথ্যপূর্ণ করতে পারেন। Tooltip এর মাধ্যমে আপনি ডেটার বিস্তারিত তথ্য প্রদর্শন করতে পারেন, এবং Data Labels এর মাধ্যমে ডেটা পয়েন্টের মান সরাসরি প্রদর্শন করতে পারেন। উভয় উপাদানের শৈলী, অবস্থান, এবং কন্টেন্ট কাস্টমাইজেশন আপনার চার্টের পঠনযোগ্যতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করবে।
Read more
